
<template>
  <div :class="theme === 'bt-theme' ? 'login bt-theme' : 'login hs-theme'">
    <!-- <div class="login-logo">
      <div class="logo">
        <div class="logo-img" />
      </div>
      <i v-if="switchSkin" class="el-icon-swap logo-swap" @click="handleTemp" />
    </div> -->
    <div class="banner">
      <div class="bg" :style="'height:' + contentHeight + 'px'">
        <div class="login_container">
          <div class="login-form" :style="iscaptcha ? '' : 'height: 320px;'">
            <section>
              <div class="login-label">
                用户登录
              </div>
              <el-form
                ref="formData" :model="formData" :rules="formRules"
                class="demo-ruleForm"
              >
                <el-form-item prop="username">
                  <div class="icon user" />
                  <el-input
                    v-model="formData.username" class="login-input" autofocus
                    auto-complete="off" placeholder="请输入用户名"
                  />
                </el-form-item>
                <el-form-item prop="operPasswd">
                  <div class="icon passwd" />
                  <el-input
                    v-model="formData.operPasswd" class="login-input" type="password"
                    auto-complete="off" placeholder="请输入密码"
                  />
                </el-form-item>
                <el-form-item v-if="iscaptcha" prop="captcha">
                  <el-col :span="12">
                    <div class="icon captcha" />
                    <el-input
                      v-model="formData.captcha" class="login-input" :is-throttle="false"
                      auto-complete="off" placeholder="请输入验证码" @keyup.enter.native="submitForm"
                    />
                  </el-col>
                  <el-col :span="12">
                    <div class="img-captcha">
                      <valid-code
                        ref="validCode" :captcha="formData.captcha" :valid-icon="validIcon"
                        @refreash="refreash" @error="error" @receive="receive"
                      />
                    </div>
                  </el-col>
                </el-form-item>
                <el-form-item>
                  <el-button
                    class="btn-submit" type="primary" size="large"
                    :loading="isLoginLoading" @click="submitForm"
                  >
                    登&emsp;&emsp;录
                  </el-button>
                </el-form-item>
              </el-form>
            </section>
          </div>
        </div>
      </div>
    </div>
    <div class="copyright">
      <p />
    </div>
    <!-- <ResetPwd /> -->
  </div>
</template>

<script>
// import ElForm from 'components/form';
// import ElFormItem from 'components/form-item';
// import ElInput from 'components/input';
// import ElButton from 'components/button';
// import ElCol from 'components/col';
import { post, axios } from 'utils/util';
import * as cacheUtil from 'store/cache-util'; // 缓存工具类
// import Message from 'components/message';
import { util } from 'utils/util'; // 工具类
import md5 from 'static/js/md5.min.js';
// import validCode from 'components/valid-code';
const loginServletUrl = SERVICE_URL + '/auth/login'; // 登录地址
import debounce from 'lodash/debounce';
// import ResetPwd from '@/modules/exportUm/reset/reset.vue';
export default {
  name: 'Login',
  components: {
		// ResetPwd
    // ElForm,
    // ElFormItem,
    // ElInput,
    // ElButton,
    // ElCol,
    // Message,
    // validCode,
  },
  props: {
    // 登陆成功跳转地址
    htmlUrl: {
      type: String,
      default: './index.html',
    },
    switchSkin: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      contentHeight: 0,
      formData: {
        username: '',
        operPasswd: '',
        captcha: '',
      },
      message: '',
      isLoginLoading: false,
      sessionId: '',
      ticket: '',
      timer: null,
      validIcon: '',
      isLogin: false,
      iscaptcha: false, // 是否需要验证码
      formRules: {
            username: [{
                required: true,
                message: '请输入用户名',
                trigger: 'blur'
							},
							{
									min: 3,
									max: 30,
									message: '长度在 3 到 30 个字符',
									trigger: 'blur'
							}
            ],
            operPasswd: [{
                required: true,
                message: '请输入密码',
                trigger: 'blur'
							},
							{
									min: 3,
									max: 30,
									message: '长度在 3 到 30 个字符',
									trigger: 'blur'
							}
            ],
            captcha: [{
                required: true,
                message: '请输入验证码',
                trigger: 'blur'
							},
							{
									min: 3,
									max: 10,
									message: '长度在 3 到 10 个字符',
									trigger: 'blur'
							}
        	  ]
      },
      theme: 'bt-theme',
    };
  },
	watch: {
    'formData.captcha': debounce(function(newVal, oldVal) {
      if (this.iscaptcha) {
        this.$refs.validCode.validateCaptcha();
        this.validIcon = 'el-icon-loading';
      }
    }, 800)
  },
  created() {
		console.log('登录页面-->');
    cacheUtil.clearCookie();
    this.getMainHeight();

    if (this.switchSkin) {
      const theme = window.localStorage.getItem('login-theme');
      if (!theme) {
        window.localStorage.setItem('login-theme', 'bt-theme');
      }
      this.theme = window.localStorage.getItem('login-theme');
    } else {
      window.localStorage.removeItem('login-theme');
    }
  },
  mounted() {
    window.addEventListener('resize', this.getMainHeight);
  },
  destroyed() {
    window.removeEventListener('resize', this.getMainHeight);
  },
  methods: {
    // 计算main主体高度
    getMainHeight() {
      const curHeight = window.innerHeight - 140;
      this.contentHeight = curHeight < 400 ? 400 : curHeight;
    },
    refreash() {
      this.validIcon = '';
    },
    // 获取验证码的sessionId 与ticket
    receive(sessionId, ticket) {
      this.sessionId = sessionId;
      this.ticket = ticket;
      if (this.isLoginLoading) {
        this.login();
      } else {
        this.validIcon = 'el-icon-check';
      }
    },
    // 验证码错误返回
    error(err) {
      if (this.isLoginLoading) {
        this.$message.error(err);
        this.isLoginLoading = false;
      } else {
        this.validIcon = 'el-icon-close';
      }
    },
    submitForm() {
      this.$refs.formData.validate((valid) => {
        const _this = this;
        if (valid) {
          _this.isLoginLoading = true;
          _this.message = '';
          if (_this.iscaptcha) {
            _this.$refs.validCode.validateCaptcha();
          } else {
            _this.login();
          }
        } else {
          return false;
        }
      });
    },
    login() {
      const _this = this;
      post(
        loginServletUrl,
        {
          data: {
            username: _this.formData.username,
            password: md5(_this.formData.operPasswd),
            captcha: {
              sessionId: _this.sessionId,
              ticket: _this.ticket,
            },
          },
        },
        (resp) => {
          _this.isLoginLoading = false;
          if (!resp.data.result || resp.data.code !== '0') {
            _this.iscaptcha = true;
            _this.formData.captcha = '';
						if (resp.errorCode === '401') {
              this.$message.error({ message: resp.message, duration: 2000 });
            }
          } else {
            this.getHeadOffice();
            cacheUtil.setCookies('Authorization', resp.data.data);
            util.getCurrentUser((oper) => {
              oper.current_dept_code = oper.c_login_dept_code;
              oper.current_dept_name = oper.c_login_dept_name;
              delete oper.menus;
              delete oper.c_auth_grps;
              cacheUtil.setCookies('oper', JSON.stringify(oper));
              window.location.href = this.htmlUrl;
            });
          }
        },
        (err) => {
          _this.isLoginLoading = false;
					this.$message.error(err.message);
        }
      );
    },
    getHeadOffice() {
      axios.post(PERFORM_URL + '/dict/getheadofficeInfo', {})
      .then((res) => {
        console.log(res, 'res');
        cacheUtil.setCookies('getHeadOffice', JSON.stringify(res.data));
      })
      .catch((error) => {
        this.$message.error(error.message);
      });
    },
    resetForm() {
      this.$refs.formData.resetFields();
    },
    // 模拟皮肤切换
    handleTemp() {
      const theme = window.localStorage.getItem('login-theme');
      if (theme === 'bt-theme') {
        window.localStorage.setItem('login-theme', 'hs-theme');
      }
      if (theme === 'hs-theme') {
        window.localStorage.setItem('login-theme', 'bt-theme');
      }
      this.theme = window.localStorage.getItem('login-theme');
      location.reload();
    },
  },

};
</script>
<style lang="scss" scoped>
.hs-theme {
  .login-logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .logo {
      height: 50px;
      line-height: 50px;
      .logo-img {
        margin: 5px 10px;
        /* background-image: url('~static/img/logo.png'); */
        height: 40px;
        width: 200px;
        background-repeat: no-repeat;
        background-size: auto 100%;
      }
    }
    .logo-swap {
      margin-right: 15px;
    }
  }
  .banner {
    padding: 0;
    text-align: center;
    background-color: #1b8cf2;
    .bg {
      margin: 0 auto;
      background-repeat: no-repeat;
      background-size: auto 100%;
      background-position: 50%;
      background-image: url('~static/img/login/banner.jpg');
    }
  }
  .copyright {
    text-align: center;
    background-color: #1b8cf2;
    padding: 38px 0 20px 0;
    color: #ffffff;
    p:after {
      /* content: '版权所有 © 恒生电子股份有限公司'; */
    }
  }
}
.bt-theme {
  .login-logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .logo {
      height: 50px;
      line-height: 50px;
      .logo-img {
        margin: 5px 10px;
        /* background-image: url('~static/img/logo.png'); */
        height: 40px;
        width: 200px;
        background-repeat: no-repeat;
        background-size: 100% auto;
      }
    }
    .logo-swap {
      margin-right: 15px;
    }
  }
  .banner {
    padding: 0;
    text-align: center;
    background: linear-gradient(to bottom, #a7cbff 50%, #0b4a85 50%);
    .bg {
      margin: 0 auto;
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: 25%;
      background-image: url('~static/img/login/banner.jpg');
    }
  }
  .copyright {
    text-align: center;
    background-color: #0b4a85;
    padding: 38px 0 20px 0;
    color: #ffffff;
    p:after {
      /* content: '版权所有 © 恒生保泰(广东)科技有限公司'; */
    }
  }
}
.login_container /deep/ .el-form-item__content {
  margin-bottom: 20px;
}
.login_container /deep/ .el-form-item__error {
  position: absolute;
  padding: 5px;
}
.login_container {
  position: relative;
  top: 40px;
  padding: 0 128px;
  .login-form {
    float: right;
    width: 380px;
    height: 380px;
    padding: 15px 30px;
    margin: 0 auto;
    border-radius: 8px;
    background-color: #fff;
    text-align: left;
    .icon {
      width: 40px;
      height: 40px;
      position: absolute;
      z-index: 3;
      background-position: center;
      background-repeat: no-repeat;
    }
    .user {
      background-image: url('~static/img/login/user.png');
    }
    .passwd {
      background-image: url('~static/img/login/pass.png');
    }
    .captcha {
      background-image: url('~static/img/login/yzm.png');
    }
    .login-input /deep/input {
      font-size: 14px;
      color: #333;
      border-radius: 4px;
      height: 40px !important;
      line-height: 40px;
      text-indent: 40px;
      padding: 0;
    }
    .btn-submit {
      width: 100%;
      background-color: #0275d8;
      border-color: #0275d8;
      border-radius: 4px;
      font-size: 20px;
      color: #ffffff;
      height: 50px;
    }
    .btn-submit:hover {
      background-color: #025aa5;
    }
    .login-label {
      font-size: 22px;
      margin: 24px 0;
    }
    .img-captcha {
      width: 100%;
      padding-left: 20px;
      display: table-cell;
      cursor: pointer;
    }
    .btn-submit:focus {
      outline: none;
      background-color: #0275d8;
    }
  }
}
</style>
